<template>
  <div class="music-app">
    <div class="header-panel">
      <div class="operation-button-container">
        <operation-button :window="window" />
      </div>
      <div class="search-bar">
        <n-input size="small" type="text" placeholder="歌曲名/作者名/专辑名">
          <template #prefix>
            <search fill="#333" />
          </template>
        </n-input>
      </div>
      <div class="menu-bar"></div>
    </div>
    <div class="main">
      <div class="list"></div>
      <div class="content"></div>
    </div>
    <div class="control-panel"></div>
  </div>
</template>

<script lang="ts" setup>
import OperationButton from "@/components/applications/window/components/OperationButton.vue"
import type BiuOS from "@/core/biu-os"
import { Search } from "@icon-park/vue-next"
import { onMounted } from "vue"

const props = defineProps({
  window: {
    type: Object as () => BiuOS.Window,
    required: true
  }
})

onMounted(() => {
  props.window?.setTheme("light")
})
</script>

<style lang="scss" scoped>
.music-app {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .header-panel {
    height: 0.4rem;
    flex-shrink: 0;
    background: #00a8ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;

    .search-bar {
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .n-input {
        background: white;
        color: black;
      }
    }
  }

  .main {
    flex-grow: 1;
    display: flex;

    .list {
      width: 2.2rem;
      height: 100%;
      border-right: 1px solid rgba(200, 200, 200, 0.5);
      flex-shrink: 0;
    }

    .content {
      flex-grow: 1;
      background: #ffffff;
      height: 100%;
    }
  }

  .control-panel {
    flex-shrink: 0;
    height: 0.6rem;
    background: #00a8ff;
  }
}
</style>
